<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Flow Example</title>
    <link
    rel="stylesheet"
    href="https://unpkg.com/react-flow-renderer/dist/style.css"
  />
  <style>

    body {
      background-color: #1a1a1a;
      color: #ffffff;
      font-family: Arial, sans-serif;
    }
    #root {
      width: 800px;
      height: 600px;
      border: 1px solid #444;
      margin: 50px auto;
    }
  </style>

</head>
<body>
  <div id="root"></div>

  <!-- 引入 React 和 React DOM -->
  <script crossorigin src="js/react.development.js"></script>
  <script crossorigin src="js/react-dom.development.js"></script>

  <!-- 引入 Babel 用于编译 JSX -->
  <script src="js/babel.min.js"></script>

  <!-- 引入 React Flow 相关依赖 -->
  <script src="js/reactflow.min.js"></script>

  <script type="text/babel">
    // 导入 React 和 ReactFlow
    const { createRoot } = ReactDOM;
    const { ReactFlow, addEdge, removeElements, Controls, Background, MiniMap } = window.ReactFlow;

    // 创建根元素
    const root = createRoot(document.getElementById('root'));

    // 初始化节点
    const initialNodes = [
      { id: '1', position: { x: 250, y: 5 }, data: { label: '开始' }, type: 'input' },
      { id: '2', position: { x: 100, y: 100 }, data: { label: '判断' }, type: 'default' },
      { id: '3', position: { x: 400, y: 100 }, data: { label: '分支1' }, type: 'default' },
      { id: '4', position: { x: 250, y: 200 }, data: { label: '结束' }, type: 'output' }
    ];

    // 初始化边
    const initialEdges = [
      { id: 'e1-2', source: '1', target: '2' },
      { id: 'e2-3', source: '2', target: '3' },
      { id: 'e3-4', source: '3', target: '4' }
    ];

    // 处理节点变化
    function applyNodeChanges(changes, nodes) {
      return changes.reduce((acc, change) => {
        if (change.type === 'add') {
          acc.push(change.node);
        } else if (change.type === 'remove') {
          acc = acc.filter(node => node.id !== change.id);
        } else if (change.type === 'update') {
          acc = acc.map(node => (node.id === change.id ? { ...node, ...change.data } : node));
        }
        return acc;
      }, nodes);
    }

    // 处理边变化
    function applyEdgeChanges(changes, edges) {
      return changes.reduce((acc, change) => {
        if (change.type === 'add') {
          acc.push(change.edge);
        } else if (change.type === 'remove') {
          acc = acc.filter(edge => edge.id !== change.id);
        } else if (change.type === 'update') {
          acc = acc.map(edge => (edge.id === change.id ? { ...edge, ...change.data } : edge));
        }
        return acc;
      }, edges);
    }

    // React 组件
    const App = () => {
      const [nodes, setNodes] = React.useState(initialNodes);
      const [edges, setEdges] = React.useState(initialEdges);

      const onNodesChange = (changes) => setNodes((nds) => applyNodeChanges(changes, nds));
      const onEdgesChange = (changes) => setEdges((eds) => applyEdgeChanges(changes, eds));
      const onConnect = (connection) => setEdges((eds) => addEdge(connection, eds));

      return (
        <ReactFlow
          nodes={nodes}
          edges={edges}
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
          onConnect={onConnect}
          fitView
        >
          <Controls />
          <MiniMap />
          <Background variant="dots" gap={12} size={1} />
        </ReactFlow>
      );
    };

    // 渲染应用
    root.render(<App />);
  </script>
</body>
</html>